<template>
  <div class="Goodsinfo-con">
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
      <div class="ball" v-show="flg"></div>
    </transition>

    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in lunbotu" :key="item.id">
              <img
                :src="item.src"
                onerror="this.src='http://www.itcast.cn/subject/webzly/images/1.jpg';this.onerror=null"
              />
            </mt-swipe-item>
          </mt-swipe>
        </div>
      </div>
    </div>

    <div class="mui-card">
      <div class="mui-card-header">{{goodsinfo.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>
            <span>
              市场价：
              <del>￥{{goodsinfo.market_price}}</del>
            </span>
            <span style="color:red;font-size:14px">销售价：￥{{goodsinfo.sell_price}}</span>
          </p>
          <div class="buyNo">
            <span>购买数量：</span>

            <div class="mui-numbox" data-numbox-min="1" data-numbox-max="2">
              <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
              <input id="test" class="mui-input-numbox" type="number" value="1" ref="nobox" @change="countChanged"/>
              <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
            </div>
          </div>

          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small" @click="addToCart">加入购物车</mt-button>
        </div>
      </div>
    </div>

    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{goodsinfo.goods_no}}</p>
          <p>库存情况：{{goodsinfo.stock_quantity}}件</p>
          <p>上架时间：{{goodsinfo.add_time | dataFom}}</p>
        </div>
      </div>
      <div class="mui-card-footer ziding">
        <mt-button type="primary" size="large" :disabled="flg3" @click.native="goodsinfoClk">图文介绍</mt-button>
        <mt-button type="danger" size="large" :disabled="flg4" @click.native="goosdSabb">商品评论</mt-button>
        <!-- <mt-button type="danger" size="large">商品评论</mt-button> -->
      </div>
    </div>

    <div class="mui-card" v-show="flg2">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import mui from "@/assets/lib/mui/js/mui.js"
// import {mapMutations} from 'vuex';
export default {
  data() {
    return {
      lunbotu: [],
      goodsinfo: [],
      no: 1,
      flg:false,
      flg2:false,
      flg3:false,
      flg4:false,
      num:1
    };
  },
  created() {
    this.getlunbotu();
    this.getGoodsInfoById();
  },
//   mounted() {
//     mui(".mui-numbox").numbox();
//   },
  methods: {
    // ...mapMutations(['addToCar']),
    async getlunbotu() {
      const { data } = await this.$http.get("/api/getthumimages/" + this.id);
      if (data.status === 0) {
        //console.log(data);
        return (this.lunbotu = data.message);
      }
    },
    async getGoodsInfoById() {
      const { data } = await this.$http.get("/api/goods/getinfo/" + this.id);
      if (data.status === 0) {
        this.no = data.message[0].stock_quantity;
        //console.log(data);
        return (this.goodsinfo = data.message[0]);
      }
    },
    goodsinfoClk() {
    //   if (
    //     this.$route.path ===
    //     "/goodsinfo/" + this.id + "/goodsdesc")
    //     return;
        this.flg3=this.flg2=true
        this.flg4=false
      const id=this.id
      this.$router.replace({ name: 'goodsdesc', params: { id }, replace:true});
    },
    goosdSabb() {
    //   if (
    //     this.$route.path ===
    //     "/home/goodsinfo/" + this.id + "/sabb/" + this.id
    //   )
    //     return;
    this.flg4=this.flg2=true
        this.flg3=false
      this.flg2=true;
      const id=this.id
      this.$router.replace({ name: 'goodspinglun', params: { id }, replace:true});
    },
    countChanged(){
      const val=this.$refs.nobox.value;
      this.num=parseInt(val);
    },
    addToCart(){
      // 加入购物车
      this.flg=!this.flg;
      //console.log(this.num);
      //this.addToCar({id:this.id,count:this.num,selected:true,price:this.goodsinfo.sell_price});
      //console.log(this.$store.state.cart)
    },
    beforeEnter(el){
       el.style.transform="translate(0,0)";
    },
    enter(el,done){
      el.offsetWidth;

      const ballp=el.getBoundingClientRect();
      const ballgp=document.getElementById("bag").getBoundingClientRect();
      const left=ballgp.left-ballp.left;
      const top=ballgp.top-ballp.top;

       el.style.transform="translate("+left+"px,"+top+"px)";
    //    el.style.transform="translate(50px,50px)";
       el.style.transition="all 1s cubic-bezier(.97,-0.97,.62,.51)";
       done();
    },
    afterEnter(el){
      this.flg=!this.flg;
    }
  },
//   watch: {
//     no: function(newval, oldval) {
//       //console.log(newval+"---"+oldval);
//       mui(".mui-numbox")
//         .numbox()
//         .setOption("max", newval);
//     }
//   },
  props: ["id"]
};
</script>

<style lang="scss" scoped>
.Goodsinfo-con {
  background-color: #eee;
  overflow: hidden;
}
.mint-swipe {
  height: 180px;
  .mint-swipe-item {
    text-align: center;
    img {
      // width: 100%;
      height: 100%;
    }
  }
}
.ziding {
  //flex-direction: column;
  button {
    margin: 0 5px;
  }
}
.buyNo {
  margin: 10px 10px 10px 0;
}
.ball{
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius:50% ;
  position: absolute;
  z-index: 99;
  left: 152px;
  top: 370px;
  //transform: translate(86px,250px);
}
</style>